﻿<link href="~/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/linkbutton/jeasyui.extensions.linkbutton.setPlain.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/window/jeasyui.extensions.window.autoCenter.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/dialog/jeasyui.extensions.dialog.sealed.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false" style="padding:25px;">
    <div id="d1"></div>
    <a id="btnOpen0" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">把页面上预留的 div#d1 初始化为dialog，href 指向一个部分页。</a>&nbsp;&nbsp;<span style="color:red;">（easyui-dialog原来的使用方式，需要预留div给dialog）</span>
    <br /><br />
    <a id="btnOpen1" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">动态创建div并初始化为dialog，href 指向一个部分页。</a>&nbsp;&nbsp;<span style="color:red;">（不需要预留div给dialog，动态创建div）</span>
    <br /><br />
    <a id="btnOpen2" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">动态创建div并初始化为dialog，内部嵌套 iframe，href 指向一个完整页。</a>&nbsp;&nbsp;<span style="color:red;">（不需要预留div给dialog，动态创建div，并且动态创建iframe，不必管content属性）</span>
    <hr /><br />
    <div style="width:800px;height:380px;border:1px solid #ccc;padding:5px;">
        <span style="color:black;font-size:15px;font-weight:bolder;">保存按钮参数：</span>
        <br />
        <input name="enableSaveButton" type="radio" value="true" checked="checked" /> 启用保存按钮 &nbsp;
        <input name="enableSaveButton" type="radio" value="false" /> 不启用保存按钮 &nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮顺序号&nbsp;<input id="saveButtonIndex" name="saveButtonIndex" type="text" value="101" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮文本&nbsp;<input id="saveButtonText" name="saveButtonText" type="text" value="确定" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮图标样式&nbsp;<input id="saveButtonIconCls" name="saveButtonIconCls" type="text" value="icon-save" style="width:80px;" />
        <br />
        按钮事件&nbsp;
        <input name="onSave" type="radio" value="true" checked="checked" /> 返回 true（关闭dialog） &nbsp;
        <input name="onSave" type="radio" value="false" /> 返回 false（不关闭dialog） &nbsp;
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">应用按钮参数：</span>
        <br />
        <input name="enableApplyButton" type="radio" value="true" /> 启用应用按钮 &nbsp;
        <input name="enableApplyButton" type="radio" value="false" checked="checked" /> 不启用应用按钮 &nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮顺序号&nbsp;<input id="applyButtonIndex" name="applyButtonIndex" type="text" value="103" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮文本&nbsp;<input id="applyButtonText" name="applyButtonText" type="text" value="应用" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮图标样式&nbsp;<input id="applyButtonIconCls" name="applyButtonIconCls" type="text" value="icon-ok" style="width:80px;" />
        <br />
        按钮事件&nbsp;
        <input name="onApply" type="radio" value="true" checked="checked" /> 返回 true（禁用按钮） &nbsp;
        <input name="onApply" type="radio" value="false" /> 返回 false（不禁用按钮） &nbsp;
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">取消按钮参数：</span>
        <br />
        <input name="enableCloseButton" type="radio" value="true" checked="checked" /> 启用关闭按钮 &nbsp;
        <input name="enableCloseButton" type="radio" value="false" /> 不启用关闭按钮 &nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮顺序号&nbsp;<input id="closeButtonIndex" name="closeButtonIndex" type="text" value="102" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮文本&nbsp;<input id="closeButtonText" name="closeButtonText" type="text" value="取消" style="width:60px;" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        按钮图标样式&nbsp;<input id="closeButtonIconCls" name="closeButtonIconCls" type="text" value="icon-cancel" style="width:80px;" />
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">增加额外按钮：</span>
        额外按钮个数&nbsp;<input id="otherButtonNumber" type="text" class="easyui-numberbox" data-options="min:0,max:3,value:0" style="width:60px;" />
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">底部按钮的效果：</span>
        <input name="buttonsPlain" type="radio" value="true" /> Plain 为 true，简洁效果 &nbsp;
        <input name="buttonsPlain" type="radio" value="false" checked="checked" /> Plain 为 false，非简洁效果 &nbsp;
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">关闭时自动销毁：</span>
        <input name="autoDestroy" type="radio" value="true" checked="checked" /> 自动销毁 &nbsp;
        <input name="autoDestroy" type="radio" value="false" /> 不销毁 &nbsp;
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">是否在顶层window对象中打开：</span>
        <input name="topMost" type="radio" value="true" /> 在顶层window对象中打开 &nbsp;
        <input name="topMost" type="radio" value="false" checked="checked" /> 在当前window对象中打开 &nbsp;
        <br /><br />

        <span style="color:black;font-size:15px;font-weight:bolder;">是否嵌套iframe：</span>
        <input name="iniframe" type="radio" value="true" /> 嵌套iframe，加载完整页面 &nbsp;
        <input name="iniframe" type="radio" value="false" checked="checked" /> 不嵌套iframe，加载部分页面 &nbsp;
        <br /><br />
    </div>
    <br /><br />
    <a id="btnOpen555" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">点击我，根据边框内的配置参数，动态创建div并初始化为dialog。</a>
</div>


<script>
    $(function () {

        var checkTopDialogSealedJs = function () {
            var topHead = top.$("head"),
                existHeadContent = topHead.html(),
                exist = existHeadContent.contains("jeasyui.extensions.dialog.sealed.js");

            return exist;
        };

        var loadExt = function () {
            var jsUrl = ["/Scripts/jquery-easyui-extensions/linkbutton/jeasyui.extensions.linkbutton.setPlain.js",
                    "/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js",
                    "/Scripts/jquery-easyui-extensions/window/jeasyui.extensions.window.autoCenter.js",
                    "/Scripts/jquery-easyui-extensions/dialog/jeasyui.extensions.dialog.sealed.js"];
            top.$.util.loadJs(jsUrl);

            var cssUrl = ["/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css"];
            top.$.util.loadCss(cssUrl);
        };

        $("[name='topMost']").click(function () {
            if ($(this).val().toBoolean() && !checkTopDialogSealedJs()) {
                loadExt();
            }
        });

        var theAutoCreateDialog;

        $("#btnOpen0").click(function () {
            var t = $("#d1"),
                state = $.data(t[0], "dialog");
            if (state) {
                t.dialog("open");
            }
            else {
                var href = "/Blank/EasyuiPanelPage";
                var opts = {
                    href: href,
                    title: "常规方式打开的dialog",
                    width: 400,
                    height: 240,
                    closed: true,
                    buttons:
                        [
                            { text: "确定", iconCls: "icon-ok", handler: function () { alert("确定"); } },
                            { text: "取消", iconCls: "icon-cancel", handler: function () { t.dialog("close"); } }
                        ]
                };

                t.dialog(opts).dialog("open");
            }
        });

        $("#btnOpen1").click(function () {

            var href = "/Blank/EasyuiPanelPage";
            $.easyui.showDialog({

                href: href,
                buttonsPlain: false,
                width: 400,
                height: 240,
                onLoad: function () {
                    //console.log("HTML中：封装 dialog 加载 [" + href + "] 完毕");
                }
            });
        });

        $("#btnOpen2").click(function () {
            var href = "/Blank/EasyuiIndex";
            $.easyui.showDialog({

                href: href,
                buttonsPlain: false,
                width: 400,
                height: 240,
                iniframe: true,
                onLoad: function () {
                    //console.log("HTML中：封装 dialog 加载 [" + href + "] 完毕");
                }
            });
        });

        $("#btnOpen555").click(function () {

            var iniframe = $("[name='iniframe']:checked").val().toBoolean();
            var topMost = $("[name='topMost']:checked").val().toBoolean();
            var autoDestroy = $("[name='autoDestroy']:checked").val().toBoolean();
            if (autoDestroy && theAutoCreateDialog) {
                theAutoCreateDialog.dialog("destroy"); theAutoCreateDialog = undefined;
            }
            var href = iniframe ? "/Blank/EasyuiIndex" : "/Blank/EasyuiPanelPage";
            if (!autoDestroy && theAutoCreateDialog && theAutoCreateDialog.dialog("options").href != href) {
                theAutoCreateDialog.dialog("destroy"); theAutoCreateDialog = undefined;
            }

            if (theAutoCreateDialog) {
                theAutoCreateDialog.dialog("open");
                return;
            }

            var opts = {
                href: href,
                width: 500,
                height: 340,
                onClose: function () {
                    if (autoDestroy) {
                        theAutoCreateDialog = undefined;
                    }
                }
            };
            var returnOnSave = $("[name='onSave']:checked").val().toBoolean(); 
            var returnOnApply = $("[name='onApply']:checked").val().toBoolean();

            opts.enableSaveButton = $("[name='enableSaveButton']:checked").val().toBoolean();
            opts.saveButtonIndex = $("#saveButtonIndex").val().toInteger();
            opts.saveButtonText = $("#saveButtonText").val();
            opts.saveButtonIconCls = $("#saveButtonIconCls").val();
            opts.onSave = function (dia) {
                return returnOnSave;
            };
            opts.onApply = function () {
                return returnOnApply;
            };

            opts.enableApplyButton = $("[name='enableApplyButton']:checked").val().toBoolean();
            opts.applyButtonIndex = $("#applyButtonIndex").val().toInteger();
            opts.applyButtonText = $("#applyButtonText").val();
            opts.applyButtonIconCls = $("#applyButtonIconCls").val();

            opts.enableCloseButton = $("[name='enableCloseButton']:checked").val().toBoolean();
            opts.closeButtonIndex = $("#closeButtonIndex").val().toInteger();
            opts.closeButtonText = $("#closeButtonText").val();
            opts.closeButtonIconCls = $("#closeButtonIconCls").val();

            opts.buttonsPlain = $("[name='buttonsPlain']:checked").val().toBoolean();
            opts.autoDestroy = autoDestroy;
            opts.topMost = topMost;
            opts.iniframe = iniframe;

            var otherButtonsCount = $("#otherButtonNumber").numberbox("getValue").toInteger();
            var otherButtons = [];
            for (var c = 0; c < otherButtonsCount; c++) {
                otherButtons.push({ text: "按钮" + (c + 1), index:c, iconCls: "icon-edit", handler: function (dialog, btn) { alert("这是第"+ (btn.index + 1) +"个额外按钮。"); } });
            }
            opts.buttons = otherButtons;

            theAutoCreateDialog = $.easyui.showDialog(opts);
        });
    });
</script>